<%--
  Created by IntelliJ IDEA.
  User: ChenYu
  Date: 2017-06-13
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/static/common/taglib.jsp" %>
<html>
<head>
    <%@include file="../public/web/commonJs.jsp" %>
</head>
<body>

<%@include file="../public/web/nav.jsp" %>

<div class="w1000 m_center cf">

    <div id="slideBox" class="slideBox w1000 m_center mb40">
        <div class="bd">
            <ul>
                <c:forEach var="shoes" items="${s.shoesImgList}">
                    <li>
                        <p class="text">
                            <span>${s.name}</span>
                        </p>
                        <p>
                            <img class="m_center" src="${baseInfo.fileServerPath}${shoes.imageUrl}" width="480"
                                 height="480"/>
                        </p>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div class="hd list-small">
            <ul class="clearfix">
                <c:forEach var="shoes" items="${s.shoesImgList}">
                    <li class="animate"><img src="${baseInfo.fileServerPath}${shoes.imageUrl}" width="150"
                                             height="150"/></li>
                </c:forEach>
            </ul>
        </div>

        <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
        <a class="prev animate" href="javascript:void(0)">
            <img src="${ctx}/static/web/images/20.png" width="41" height="77" alt=""/>
        </a>
        <a class="next animate" href="javascript:void(0)">
            <img src="${ctx}/static/web/images/10.png" width="41" height="77" alt=""/>
        </a>

    </div>

    <script id="jsID" type="text/javascript">
        var ary = location.href.split("&");
        jQuery(".slideBox").slide({
            mainCell: ".bd ul",
            effect: ary[1],
            autoPlay: ary[2],
            trigger: ary[3],
            easing: ary[4],
            delayTime: ary[5],
            mouseOverStop: ary[6],
            pnLoop: ary[7]
        });
    </script>

    <div class="cf w1000 m_center" style="z-index:2;position:relative;margin-bottom:80px">
        <div class="f_left w485">
            <div class="title3 js-list mb30">
                <span class="text" shoeStyle="${s.style}">${s.color}</span>
                <div class="list-popup">
                    <c:forEach items="${colors}" var="color">
                        <div class="item">${color}</div>
                    </c:forEach>
                </div>
            </div>
            <div class="title3 js-list2 mb30">
                <span class="text" showBelow="${s.shoeBelow}">${s.shoeBelow}</span>
                <div class="list-popup">
                    <c:forEach items="${shoeBelows}" var="sb">
                        <div class="item">${sb}</div>
                    </c:forEach>
                </div>
            </div>
            <div class="mb30">
                <h3 class="mb10 f16">简介:</h3>
                <p class="f16">${s.description}</p>
            </div>
            <p class="f16">
                材质：${s.material}&nbsp;&nbsp;/&nbsp;&nbsp;鞋底：${s.shoeBelow}&nbsp;&nbsp;/&nbsp;&nbsp;尺寸：${s.sizeRange}</p>
        </div>

        <div class="f_right">
            <p class="price">￥${s.price}</p>
            <p>
                <a href="${s.taoBaoHref}" target="_blank" class="btn2 animate">淘宝旗舰店购买</a>
            </p>
        </div>
    </div>
</div>

<div class="w1200 m_center">
    <h2 class="align_center mb20">
        <strong class="f18">相似鞋款</strong>
    </h2>

    <div class="list-xiezi cf">
        <c:forEach var="sh" items="${ss}">
            <div class="item">
                <a class="img" onclick="_hmt.push(['_trackEvent', 'shoes', 'click', '${sh.num}'])"
                   href="${ctx}/shoes/${sh.id}">
                    <c:if test="${empty sh.coverImg}">
                        <img class="animate" src="${ctx}/static/web/images/bj-xz.png" width="240" height="240" alt=""/>
                    </c:if>
                    <c:if test="${not empty sh.coverImg}">
                        <img class="animate" src="${baseInfo.fileServerPath}${sh.coverImg}" width="240" height="240"
                             alt=""/>
                    </c:if>
                </a>
                <p class="name">${sh.name}</p>
                <p class="price"><strong>￥${sh.price}</strong></p>
            </div>
        </c:forEach>
    </div>
</div>
<script type="text/javascript">
    //全站公共js库
    $(document).ready(function (e) {
        $(".js-list .item").on("click", function () {
            var $this = $(this);
            var text = $this.text();
            var style = '${s.style}';
            $this.parent().siblings(".text").text(text);
            var url = "${ctx}/shoes/selectOne";
            var dataStr = {
                color: text,
                shoeBelow: '${s.shoeBelow}',
                style: style,
                belongSex:'${s.belongSex}'
            };
            ajaxUtil.post(url, dataStr, false, function (data) {
                window.location.href = "${ctx}/shoes/" + data.dataMap.shoes.id;
            })
        });
        $(".js-list2 .item").on("click", function () {
            var $this = $(this);
            var text = $this.text();
            var style = '${s.style}';
            $this.parent().siblings(".text").text(text);
            var url = "${ctx}/shoes/selectOne";
            var dataStr = {
                shoeBelow: text,
                color: '${s.color}',
                style: style,
                belongSex:'${s.belongSex}'
            };
            console.log(dataStr);
            ajaxUtil.post(url, dataStr, false, function (data) {
                window.location.href = "${ctx}/shoes/" + data.dataMap.shoes.id;
            })
        });

    });
</script>
<%@include file="../public/web/footer.jsp" %>

</body>
</html>